<template>
  <div>
    <div
      class="track fs-16 border marginT40"
      style="background-color: rgba(245, 247, 250, .2);
      min-height: 420px;"
    >
      <el-row :gutter="10">
        <el-col :span="20">
          <el-tabs tab-position="top" class="pa20">
            <el-tab-pane label="被举报">
              <div class="block pa30 marginT30" style="overflow:auto; height: 300px; ">
                <beiReported />
              </div>
            </el-tab-pane>
            <el-tab-pane label="举报">
              <div class="block pa30 marginT30" style="overflow:auto; height: 300px; ">
                <reported />
              </div>
            </el-tab-pane>
            <el-tab-pane label="封禁">
              <div class="block pa30 marginT30" style="overflow:auto; height: 300px; ">
                <banPage />
              </div>
            </el-tab-pane>
            <el-tab-pane label="违规">
              <div class="block pa30 marginT30" style="overflow:auto; height: 300px; ">
                <violatePage />
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>
    </div>
    <div class="track fs-16 marginT10">
      <el-row :gutter="15">
        <el-col :span="10">
          <div class="grid-content">
            <h2 class="pa10 marginT10">参加的在线课程</h2>
            <el-card
              v-if="liveList && liveList.length > 0"
              shadow="never"
              body-style="padding: '10px'"
            >
              <el-row :gutter="5">
                <el-col v-for="(item, index) in liveList" :key="index" :span="24">
                  <el-col v-if="index < 3" :span="24">
                    <el-col :span="9">
                      <div class="fs-14 line-height20 grid-content text-s-o">
                        <span>{{ item.title }}</span>
                      </div>
                    </el-col>
                    <el-col :span="6">
                      <div class="fs-14 line-height20 grid-content text-s-o">
                        <span>{{ item.userName }}</span>
                      </div>
                    </el-col>
                    <el-col :span="3">
                      <div class="fs-14 line-height20 grid-content">
                        <span v-if="item.status === 'NOT_STARTED'">未开始</span>
                        <span v-if="item.status === 'ONGOING'">进行中</span>
                        <span v-if="item.status === 'END'">已结束</span>
                        <span v-if="item.status === 'VIOLATE'">违规</span>
                        <span v-if="item.status === 'UNAUDITED'">待审核</span>
                      </div>
                    </el-col>
                    <el-col :span="6">
                      <div class="fs-14 line-height20 grid-content">
                        <span>{{ item.createTime }}</span>
                      </div>
                    </el-col>
                  </el-col>
                </el-col>
              </el-row>
              <div>
                <el-button type="text" class="fr" @click="more('second')">查看更多</el-button>
              </div>
            </el-card>
            <el-card v-else shadow="never" body-style="padding: '10px'">
              <div class="fs-14 line-height20" style="text-align: center">暂无参加在线课程的数据~</div>
            </el-card>
          </div>
        </el-col>
        <el-col :span="14">
          <!-- researchList -->
          <div class="grid-content">
            <h2 class="pa10 marginT10">参加的教研</h2>
            <el-card
              v-if="researchList && researchList.length > 0"
              shadow="never"
              body-style="padding: '10px'"
            >
              <el-row :gutter="5">
                <el-col v-for="(item, index) in researchList" :key="index" :span="24">
                  <el-col v-if="index < 3" :span="24">
                    <el-col :span="9">
                      <div class="fs-14 line-height20 grid-content text-s-o">
                        <span>{{ item.title }}</span>
                      </div>
                    </el-col>
                    <el-col :span="6">
                      <div class="fs-14 line-height20 grid-content text-s-o">
                        <span>{{ item.creatorName }}</span>
                      </div>
                    </el-col>
                    <el-col :span="3">
                      <div class="fs-14 line-height20 grid-content">
                        <span v-if="item.status === 'NOT_START'">未开始</span>
                        <span v-if="item.status === 'STARTED'">已开始</span>
                        <span v-if="item.status === 'ENDED'">已结束</span>
                        <span v-if="item.status === 'UNAUDITED'">未审核</span>
                        <span v-if="item.status === 'NORMAL'">正常</span>
                        <span v-if="item.status === 'VIOLATE'">违规</span>
                      </div>
                    </el-col>
                    <el-col :span="6">
                      <div class="fs-14 line-height20 grid-content">
                        <span>{{ item.createTime }}</span>
                      </div>
                    </el-col>
                  </el-col>
                </el-col>
              </el-row>
              <div>
                <el-button type="text" class="fr" @click="more('first')">查看更多</el-button>
              </div>
            </el-card>
            <el-card v-else shadow="never" body-style="padding: '10px'">
              <div class="fs-14 line-height20" style="text-align: center">暂无参加教研的数据~</div>
            </el-card>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="track fs-16 marginT10">
      <el-row :gutter="15">
        <el-col :span="10">
          <div class="grid-content text-s-o">
            <h2 class="pa10 marginT10">评论</h2>
            <el-card
              v-if="commentList && commentList.length > 0"
              shadow="never"
              body-style="padding: '10px'"
            >
              <el-row :gutter="5">
                <el-col v-for="(item, index) in commentList" :key="index" :span="24">
                  <el-col v-if="index < 3" :span="24">
                    <el-col :span="10">
                      <div class="fs-14 line-height20 grid-content text-s-o">
                        <span>{{ item.content }}</span>
                      </div>
                    </el-col>
                    <el-col :span="4">
                      <div class="fs-14 line-height20 grid-content text-s-o">
                        <span>{{ item.statusTxt }}</span>
                      </div>
                    </el-col>
                    <el-col :span="10">
                      <div class="fs-14 line-height20 grid-content text-s-o">
                        <span>{{ item.createTime }}</span>
                      </div>
                    </el-col>
                  </el-col>
                </el-col>
              </el-row>
              <div>
                <el-button type="text" class="fr" @click="comment('first')">查看更多</el-button>
              </div>
            </el-card>
            <el-card v-else shadow="never" body-style="padding: '10px'">
              <div class="fs-14 line-height20" style="text-align: center">暂无评论的数据~</div>
            </el-card>
          </div>
        </el-col>
        <el-col :span="14">
          <div class="grid-content text-s-o">
            <h2 class="pa10 marginT10">评价</h2>
            <el-card
              v-if="evaluationList && evaluationList.length > 0"
              shadow="never"
              body-style="padding: '10px'"
              class="fs12"
            >
              <el-row :gutter="5">
                <el-col v-for="(item, index) in evaluationList" :key="index" :span="24">
                  <el-col v-if="index < 3" :span="24">
                    <el-col :span="6">
                      <div class="fs-14 line-height20 grid-content text-s-o">
                        <span>{{ item.content }}</span>
                      </div>
                    </el-col>
                    <el-col :span="6">
                      <div class="fs-14 line-height20 grid-content">
                        <el-rate v-model="item.score/10" disabled text-color="#ff9900" />
                      </div>
                    </el-col>
                    <el-col :span="6">
                      <div class="fs-14 line-height20 grid-content text-s-o">
                        <span>评论对象：{{ item.activityName }}</span>
                      </div>
                    </el-col>
                    <el-col :span="6">
                      <div class="fs-14 line-height20 grid-content text-s-o">
                        <span>{{ item.createTime }}</span>
                      </div>
                    </el-col>
                  </el-col>
                </el-col>
              </el-row>
              <div>
                <el-button type="text" class="fr" @click="comment('second')">查看更多</el-button>
              </div>
            </el-card>
            <el-card v-else shadow="never" body-style="padding: '10px'">
              <div class="fs-14 line-height20" style="text-align: center">暂无评价的数据~</div>
            </el-card>
          </div>
        </el-col>
      </el-row>
    </div>
    <div>
      <el-row :gutter="15">
        <el-col :span="8">
          <div class="grid-content text-s-o">
            <h2 class="pa10 marginT10">关注</h2>
            <el-card
              v-if="followedList && followedList.length > 0"
              shadow="never"
              body-style="padding:'5px'"
            >
              <el-row :gutter="5" class="content-lineheight">
                <el-col v-for="(item, index) in followedList" :key="index" :span="24">
                  <el-col v-if="index < 3" :span="24">
                    <el-col :span="4">
                      <div class="grid-content">
                        <div>
                          <el-avatar :src="item.avatarUrl" class="avatar-size" />
                        </div>
                      </div>
                    </el-col>
                    <el-col :span="20">
                      <div class="grid-content">
                        <div>
                          <div>
                            <span class="fs-16">{{ item.name }}</span>
                            <span
                              v-if="item.titleName"
                              class="fs-14 marginL10"
                            >{{ item.titleName }}教师</span>
                          </div>
                          <div>
                            <span class="fs-14">{{ item.school }}</span>
                          </div>
                        </div>
                      </div>
                    </el-col>
                  </el-col>
                </el-col>
              </el-row>
              <div>
                <el-button type="text" class="fr" @click="fans('first')">查看更多</el-button>
              </div>
            </el-card>
            <el-card v-else shadow="never" body-style="padding: '10px'">
              <div class="fs-14 line-height20" style="text-align: center">暂无关注的数据~</div>
            </el-card>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content text-s-o">
            <h2 class="pa10 marginT10">粉丝</h2>
            <el-card
              v-if="fansList && fansList.length > 0"
              shadow="never"
              body-style="padding:'5px'"
            >
              <el-row :gutter="5" class="content-lineheight">
                <el-col v-for="(item, index) in fansList" :key="index" :span="24">
                  <el-col v-if="index < 3" :span="24">
                    <el-col :span="4">
                      <div class="grid-content">
                        <div>
                          <!-- <el-avatar
                          src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                          class="avatar-size"
                          />-->
                          <el-avatar :src="item.avatarUrl" class="avatar-size" />
                        </div>
                      </div>
                    </el-col>
                    <el-col :span="20">
                      <div class="grid-content">
                        <div>
                          <div>
                            <span class="fs-16">{{ item.name }}</span>
                            <span
                              v-if="item.titleName"
                              class="fs-14 marginL10"
                            >{{ item.titleName }}教师</span>
                          </div>
                          <div>
                            <span class="fs-14">{{ item.school }}</span>
                          </div>
                        </div>
                      </div>
                    </el-col>
                  </el-col>
                </el-col>
              </el-row>
              <div>
                <el-button type="text" class="fr" @click="fans('second')">查看更多</el-button>
              </div>
            </el-card>
            <el-card v-else shadow="never" body-style="padding: '10px'">
              <div class="fs-14 line-height20" style="text-align: center">暂无粉丝的数据~</div>
            </el-card>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content text-s-o">
            <h2 class="pa10 marginT10">联系记录</h2>
            <el-card
              v-if="leaveWordUserList && leaveWordUserList.length > 0"
              shadow="never"
              body-style="padding:'5px'"
            >
              <el-row :gutter="5" class="content-lineheight">
                <el-col v-for="(item, index) in leaveWordUserList" :key="index" :span="24">
                  <el-col v-if="index < 3" :span="24">
                    <el-col :span="4">
                      <div class="grid-content">
                        <el-avatar :src="item.avatarUrl" />
                      </div>
                    </el-col>
                    <el-col :span="20">
                      <div class="grid-content">
                        <div>
                          <span class="fs-16">{{ item.userName }}</span>
                          <span class="fs-14 marginL10">{{ item.titleName }}教师</span>
                        </div>
                        <div>
                          <span class="fs-14 marginL10">{{ item.school }}</span>
                        </div>
                      </div>
                    </el-col>
                  </el-col>
                </el-col>
              </el-row>
              <div>
                <el-button type="text" class="fr" @click="contact()">查看更多</el-button>
              </div>
            </el-card>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import beiReported from './component/beiReported';
import reported from './component/reported';
import banPage from './component/banPage';
import violatePage from './component/violatePage';
import { userEnrollWebCastPage, myJoinedTeachingResearch, followed, fans, commentPage, evaluationIPage, contactRecord } from '@/api/users';
export default {
  name: 'UserDetail',
  components: {
    beiReported,
    reported,
    banPage,
    violatePage
  },
  data () {
    return {
      rate_value: 3.7,
      // 在线课程
      liveList: null,
      liveQuery: {
        condition: {
          userId: this.$route.query.param
        },
        pager: {
          page: 1,
          pageSize: 10
        }
      },
      // 教研
      researchList: null,
      researchQuery: {
        condition: this.$route.query.param,
        pager: {
          page: 1,
          pageSize: 10
        }
      },
      // 关注
      followedList: null,
      followedQuery: {
        condition: this.$route.query.param,
        pager: {
          page: 1,
          pageSize: 10
        }
      },
      // 粉丝
      fansList: null,
      fansQuery: {
        condition: this.$route.query.param,
        pager: {
          page: 1,
          pageSize: 10
        }
      },

      // 评论
      commentList: null,
      commentQuery: {
        condition: this.$route.query.param,
        pager: {
          page: 1,
          pageSize: 10
        }
      },

      // 评价
      evaluationList: null,
      evaluationQuery: {
        condition: {
          activityId: null,
          pid: null,
          userId: this.$route.query.param
        },
        pager: {
          page: 1,
          pageSize: 10
        }
      },

      // 联系记录 - 用户列表
      leaveWordUserList: null,
      leaveWordUserQuery: {
        condition: this.$route.query.param,
        pager: {
          page: 1,
          pageSize: 10
        }
      }
    };
  },
  created () {
    this.init();
  },
  methods: {
    // 用于初始化数据
    async init () {
      await this.getUserEnrollWebCastPage();
      await this.getMyJoinedTeachingResearch();
      await this.getFollowed();
      await this.getFans();
      await this.getCommentPage();
      await this.getEvaluationIPage();
      await this.getContactRecord();
    },

    // 在线课程
    getUserEnrollWebCastPage () {
      userEnrollWebCastPage(this.liveQuery)
        .then(res => {
          // console.log('参加在线课程:', res.data.records);
          this.liveList = res.data.records;
        })
        .catch(error => {
          this.loading = false;
        });
    },

    // 教研
    getMyJoinedTeachingResearch () {
      myJoinedTeachingResearch(this.researchQuery)
        .then(res => {
          // console.log('参加教研:', res.data.records);
          this.researchList = res.data.records;
        })
        .catch(error => {
          this.loading = false;
        });
    },

    // 关注
    getFollowed () {
      followed(this.followedQuery)
        .then(res => {
          console.log('关注:', res.data.records);
          this.followedList = res.data.records;
        })
        .catch(error => {
          this.loading = false;
        });
    },

    // 粉丝
    getFans () {
      fans(this.fansQuery)
        .then(res => {
          console.log('粉丝:', res.data.records);
          this.fansList = res.data.records;
        })
        .catch(error => {
          this.loading = false;
        });
    },

    // 评论
    getCommentPage () {
      commentPage(this.commentQuery)
        .then(res => {
          console.log('评论:', res.data.records);
          res.data.records.map(item => {
            switch (item.status) {
              case 'OK':
                item.statusTxt = '正常';
                break;
              case 'CANCEL':
                item.statusTxt = '取消';
                break;
              case 'NOT_SHOW':
                item.statusTxt = '屏蔽';
                break;
            }
          });
          this.commentList = res.data.records;
        })
        .catch(error => {
          this.loading = false;
        });
    },

    // 评价
    getEvaluationIPage () {
      evaluationIPage(this.evaluationQuery)
        .then(res => {
          console.log('评价:', res.data.records);
          this.evaluationList = res.data.records;
        })
        .catch(error => {
          this.loading = false;
        });
    },

    // 联系记录 - 用户
    getContactRecord () {
      contactRecord(this.leaveWordUserQuery)
        .then(res => {
          console.log('联系记录-用户:', res.data.records);
          this.leaveWordUserList = res.data.records;
        })
        .catch(error => {
          this.loading = false;
        });
    },

    more (type) {
      this.$router.push({
        path: `/user/userActivity`,
        query: { param: type, userId: this.$route.query.param }
      });
    },
    comment (type) {
      this.$router.push({
        path: `/user/userComment`,
        query: { param: type, userId: this.$route.query.param }
      });
    },
    fans (type) {
      this.$router.push({
        path: `/user/userFans`,
        query: { param: type, userId: this.$route.query.param }
      });
    },
    contact () {
      this.$router.push({
        path: `/user/userContact`,
        query: { userId: this.$route.query.param }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.track {
  line-height: 25px;
}
.content-lineheight {
  height: 50px;
  line-height: 25px;
  -webkit-text-size-adjust: none;
}
.avatar-size {
  width: 50px;
  height: 50px;
}
.scroll-height {
  height: 500px;
  overflow-y: scroll;
}
</style>
